﻿<p class="text-info">
    Welcome to the Angular Store.<br />
    Please select the products you want and add them to your shopping cart.<br />
    When you are done, click the shopping cart icon to review your order and check out.
</p>

<p>
    Search: <input ng-model="search" ui-keypress="{13:'hizoEnter($event)'}"><br/>
    <pre>Model: {{selected | json}}</pre>
    Search2: <input type="text" ng-model="selected" typeahead="p.sku for p in store.products | filter:$viewValue | limitTo:8" class="form-control" typeahead-template-url="customTemplate.html">
    Cantidad: <input ng-model="packs"><br/>
    Cantidad: <input ng-model="unidades"><br/>
    <button ng-click="pmgAddToCar()">Chili</button>
    <script type="text/ng-template" id="customTemplate.html">
         <a>
            <span bind-html-unsafe="match.model.sku  | typeaheadHighlight:query"></span><span bind-html-unsafe="match.model.name"></span><span bind-html-unsafe="match.model.price"></span>
            
        </a>
    </script>
</p>
select as label for value in array
<table class="table table-bordered">
    <tr class="well">
        <td class="tdRight" colspan="4" >
            <a href="default.htm#/cart" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
                <i class="icon-shopping-cart" />
                <b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
            </a>
        </td>
    </tr>
    <tr ng-repeat="product in store.products | orderBy:'name' | filter:search | limitTo:10" >
        <td class="tdCenter"><img ng-src="img/products/{{product.sku}}.jpg" alt="{{product.name}}" />{{product.categories}}</td>
        <td>
            <a href="#/products/{{product.sku}}"><b>{{product.name}}</b></a><br />
            {{product.description}}
        </td>
        <td class="tdRight">
            {{product.price | currency}}
        </td>
        <td class="tdCenter">
            <a href="" ng-click="cart.addItem(product.sku, product.name, product.price, 1)">
                add to cart
            </a>
        </td>
    </tr>
    <tr class="well">
        <td class="tdRight" colspan="4">
            <a href="default.htm#/cart" title="go to shopping cart" ng-disabled="cart.getTotalCount() < 1">
                <i class="icon-shopping-cart" />
                <b>{{cart.getTotalCount()}}</b> items, <b>{{cart.getTotalPrice() | currency}}</b>
            </a>
        </td>
    </tr>
</table>
